<template>
	<div class="d-flex">
		<div class="left">
			<div id="myChart"></div>
			<div class="ccontent">
				<div class="title">{{state.info.completedFund}}/{{state.info.planFund}}<span>(万元)</span></div>
				<div class="text m-t10">
					<span class="c1 m-r5"></span>
					<span class="fontStyle">已完成投资额</span>
					<span class="c2 m-r5 m-l5"></span>
					<span class="fontStyle">计划投资</span>
				</div>
			</div>
		</div>
		<div class="line"></div>
		<div class="right">
			<div id="myChart2"></div>
			<div class="ccontent">
				<div class="title">{{state.info.payFund}}/{{state.info.allPayFund}}<span>(万元)</span></div>
				<div class="text m-t10">
					<span class="c3 m-r5"></span>
					<span class="fontStyle">已支出总额</span>
					<span class="c4 m-r5 m-l5"></span>
					<span class="fontStyle">支出</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, reactive, onMounted, watch } from "vue";
import echarts from "@/common/utils/echarts.js";
import {cockpitApi} from "@/api/investment";
const myChart = ref(null);
const myChart2 = ref(null);

const props = defineProps({
	year:{
		type:String,
		default:()=>{
			let date = new Date(); // 获取时间
			return  date.getFullYear() // 获取年
		}
	}
});

const state = reactive({
	info:{}
});

const init =async (year) => {
	const res =await cockpitApi.getFundSns({year:year});
	state.info = res.data;
	console.log('res.data.completedFund / res.data.planFund',res.data.completedFund / res.data.planFund);
	let rate = res.data.planFund===0?0:((res.data.completedFund / res.data.planFund).toFixed(2))*100;
	let rate2 =res.data.allPayFund===0?0:((res.data.payFund / res.data.allPayFund).toFixed(2))*100;
	let option = {
		title: [
			{
				text: "{a|" + rate + " %}",
				show: true,
				x: "center",
				y: "40%",
				textStyle: {
					rich: {
						a: {
							fontSize: 14,
							color: "#000",
							fontWeight: "bold",
						},
					},
				},
			},
			{
				text: "投资完成率",
				x: "center",
				y: "55%",
				borderColor: "#fff",
				textStyle: {
					fontWeight: "400",
					fontSize: 12,
					color: "#999999",
				},
			},
		],
		polar: {
			center: ["50%", "50%"],
			radius: ["60%", "75%"],
		},
		angleAxis: {
			max: 100,
			show: false,
		},
		radiusAxis: {
			type: "category",
			show: true,
			axisLabel: {
				show: false,
			},
			axisLine: {
				show: false,
			},
			axisTick: {
				show: false,
			},
		},
		series: [
			{
				data: [rate],
				name: "",
				type: "bar",
				roundCap: true,
				showBackground: true,
				backgroundStyle: {
					color: "#feeeea",
				},
				coordinateSystem: "polar",
				itemStyle: {
					normal: {
						color: "#fb7018",
					},
				},
			},
		],
	};
	let option2 = {
		title: [
			{
				text: "{a|" + rate2 + " %}",
				show: true,
				x: "center",
				y: "40%",
				textStyle: {
					rich: {
						a: {
							fontSize: 14,
							color: "#000",
							fontWeight: "bold",
						},
					},
				},
			},
			{
				text: "支出比例",
				x: "center",
				y: "55%",
				borderColor: "#fff",
				textStyle: {
					fontWeight: "normal",
					fontSize: 12,
					color: "#999999",
				},
			},
		],
		polar: {
			center: ["50%", "50%"],
			radius: ["60%", "75%"],
		},
		angleAxis: {
			max: 100,
			show: false,
		},
		radiusAxis: {
			type: "category",
			show: true,
			axisLabel: {
				show: false,
			},
			axisLine: {
				show: false,
			},
			axisTick: {
				show: false,
			},
		},
		series: [
			{
				data: [rate2],
				name: "",
				type: "bar",
				roundCap: true,
				showBackground: true,
				backgroundStyle: {
					color: "#eeeeff",
				},
				coordinateSystem: "polar",
				itemStyle: {
					normal: {
						color: "#7d7d9a",
					},
				},
			},
		],
	};

	myChart.value = echarts.init(document.getElementById("myChart"));
	myChart.value.setOption(option);

	myChart2.value = echarts.init(document.getElementById("myChart2"));
	myChart2.value.setOption(option2);
};
const handel = () => {};

/**
 * 条件搜索
 */
const onSearch = () => {
	init(props.year);
}

defineExpose({
	onSearch
});

onMounted(() => {
	init(props.year);
});
</script>

<style lang="scss" scoped>
.d-flex {
	justify-content: space-between;
}
#myChart,
#myChart2 {
	width: 180px;
	height: 180px;
}
.left {
	width: 50%;
}

.fontStyle{
	font-weight: 400;
	font-size: 12px;
}

.line {
	width: 1px;
	height: 200px;
	background-color: #fff;
	border: 1px dotted #ebeef5;
	margin-top: 25px;
}
.ccontent {
	text-align: center;
}
.text {
	width: 100%;
	font-size: 14px;
	color: #666666;
	line-height: 20px;
	height: 20px;
	.c1,
	.c2,
	.c3,
	.c4 {
		width: 11px;
		height: 11px;
		background: #fc7018;
		border-radius: 50%;
		display: inline-block;
	}
	.c2 {
		background: #ffefeb;
	}
	.c3 {
		background: #7d7d9a;
	}
	.c4 {
		background: #eeeeff;
	}
}
.title {
	font-size: 18px;
	color: #000;
	font-weight: 700;
	margin-bottom: 5px;
	text-align: center;
	span {
		font-size: 12px;
		color: #666666;
		font-weight: normal;
		margin-left: 5px;
	}
}
</style>
